/*学院设置 */

//import {Table, ConfigProvider } from 'antd'; // 引入ConfigProvider全局化配置
import zhCN from 'antd/es/locale/zh_CN';  // 引入中文
import React, { Component } from 'react'
import { Table, ConfigProvider, Button, Modal, Input, Radio, Select, message, Tooltip} from 'antd'

import screen from './index.module.css'
import getday from '../../util/getday'
const { TextArea } = Input;
const { Option } = Select;


export default class SetScreen extends Component {
    constructor(){
        super()
           this.myInput = React.createRef();
       }
  state = {
    visibleE: false,
    data: [],
    classgrade: '',
    classArr: [],
    isPwd: 'yes',
    isExam: 'week',
    //comment:'',
    value: '',
    classid: '',
    pwd: null,
    filepath: '',
    searcharr:[],
    submitSearch:'',
    userid:'',
    show: true,
    columns: [
      {
        title: '编号',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '账号名',
        dataIndex: 'name',
        key: 'id',
      },
      {
        title: '班级',
        dataIndex: 'classgrade',
        key: 'id',
      },
      {
        title: '课程阶段',
        dataIndex: 'course',
        key: 'id',
      },
      {
        title: '文件路径',
        dataIndex: 'filepath',
        key: 'id',
        render:(value,item,key)=>{
           
        return <p className={screen.ho} style={{width:150,height:20,marginBottom:0,overflow:'hidden',color:'rgba(25, 144, 255, 1)', textOverflow:'ellipsis',whiteSpace: 'nowrap',cursor:'pointer'}} onClick={(e)=>this.btnpath(e)}>{value}</p> 
            }
      },
      {
        title: '链接密码',
        dataIndex: 'filepwd',
        key: 'id',
        render:(value,item,key)=>{
            return <div>
                {
                    value==='null'?<p style={{marginBottom:0}}>无</p>:<p style={{marginBottom:0}}>{value}</p>
                }
            </div>  
            }
      },
      {
        title: '考试类型',
        dataIndex: 'type',
        key: 'id',
        render:(value,item,key)=>{
        return <div>
            {
                value==='month'?<p style={{marginBottom:0}}>月考</p>:<p style={{marginBottom:0}}>周考</p>
            }
        </div>  
        }
      },
      {
        title: '上传日期',
        dataIndex: 'createTime',
        key: 'id',
        render:(value,item,key)=>{
            return <div>
                <p style={{marginBottom:0}}>{getday(value*1)}</p>
            </div>  
            }
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'id',
        render:(value,item,key)=>{
            return <div>
                {
                    value==='undefined'?<p style={{marginBottom:0}}>--</p>:<Tooltip placement="topRight" color='#108ee9' title={value} style={{background:'red'}}><p style={{marginBottom:0,width:70,height:20,overflow: 'hidden',textOverflow:'ellipsis',whiteSpace: 'nowrap',cursor:'pointer'}}>{value}</p></Tooltip>
                }   
            </div>  
            }
      },
    ]
  }

  // 更新列表数据
  initData = () => this.$httpReq(this.$api.getScreenList(), res => {
    
    let arr=[]
    res.data.forEach((item,index)=>{
        arr.push(
            {
                //classid:item.screen.classid,
                id:index+1,
                name:item.user[0].name,
                classgrade:item.class[0].school+' '+item.class[0].className,
                course:item.class[0].course,
                filepath:item.screen.filepath,
                filepwd:item.screen.filepwd,
                type:item.screen.type,
                remark:item.screen.miaoshu,
                createTime:item.screen.createTime
            }
        )
    })
    arr.sort((a,b)=>b.createTime*1-a.createTime*1)
    this.setState({ data:arr })
  })

  componentDidMount() {
    this.initData()

    this.$httpReq(this.$api.classList(), res => {

        //搜索的班级列表
        let  searcharrs= [
            {
              classid: 'all',
              className:'全部'
            }
        ]
        
        res.data.forEach(item => {
          searcharrs.push(
            {
              classid: item.classid,
              className: item.school + ' ' + item.className
            }
          )
        })
        
      this.setState({ searcharr:searcharrs })
    })
  }

  //获取搜索input框的内容
  searchClass = (value) => {
     this.setState({submitSearch:value}) 
  }

  //点击搜索
  searchbtn=()=>{
    const {submitSearch}=this.state
    console.log(submitSearch)
    this.$httpReq(this.$api.searchScreen({classid:submitSearch}),res=>{
        console.log(res.data)
        let arr=[]
        res.data.forEach((item,index)=>{
            console.log(item)
            arr.push(
                {
                    //classid:item.screen.classid,
                    id:index+1,
                    name:item.user[0].name,
                    classgrade:item.class[0].school+' '+item.class[0].className,
                    course:item.class[0].course,
                    filepath:item.screen.filepath,
                    filepwd:item.screen.filepwd,
                    type:item.screen.type,
                    createTime:item.screen.createTime
                }
            )
        })
        this.setState({ data:arr})
    })
  }

  //点击路径可复制
  btnpath=(e)=>{
    const value = e.target.innerHTML;
    window.open(value)
  }

  //点击添加录屏 弹层
  addScreen = () => {
    this.setState({ visibleE: true });
    //拿到添加录屏 弹层 班级
    this.$httpReq(this.$api.classList(), res => {
      //添加录屏的班级列表
      let arr = [] 
      res.data.forEach(item => {
        arr.push(
          {
            classid: item.classid,
            className: item.school + ' ' + item.className
          }
        )
      })
      this.setState({ classArr: arr })
      
    })

    //根据登录者用户名 找到userid
    let userName=localStorage.user
    this.$httpReq(this.$api.userList(),res=>{
        res.data.forEach(item=>{
            if(item.userName===userName){
                this.setState({userid:item.userid})//要提交的userid
            }
        })
    })
  }

  handleOke = e => {
   
    const {classid,isExam,filepath,pwd,isPwd,value,userid}=this.state
  
    if(isPwd==='no'){
        this.setState({pwd:'null'})
    }
    let patrn=/^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/
    
    if(filepath===''){
        message.warning('录屏路径为必填项')
        return
    }else if(!patrn.exec(filepath)){
        message.warning('路径不合法，请重新输入')
        return
    }else if(isPwd==='yes' && pwd===''){
        message.warning('请填写密码')
        return
    }else if(classid===''){
        message.warning('请选择班级')
        return
    }else{
        this.$httpReq(this.$api.addScreen({classid, type:isExam, filepath, filepwd:pwd, miaoshu:value, userid}),res=>{
            message.warning(res.msg)
            this.initData()
        })
    }

    // console.log('班级id：',classid,'考试类型：',isExam,'路径：',filepath,'密码：',pwd,'备注：',value,'用户id：',userid)
    // // this.$httpReq(this.$api.addScreen({classid, type:isExam, filepath, filepwd:pwd, describe:value, userid}),res=>{
    // //     console.log(res)
    // //     this.initData()
    // // })
   
    this.setState({ visibleE: false })
  };

  //弹层 点击取消
  handleCancele = e => {
    this.setState({ visibleE: false });
  };

  //添加录屏 弹层 密码是否加密
  setPwd = e => {
    console.log('radio checked', e.target.value);
    if (e.target.value === 'no') {
      this.setState({ show: false })
    } else {
      this.setState({ show: true })
    }
    this.setState({ isPwd: e.target.value })//是否加密 ‘yes’/‘no’
  };

  //添加录屏 弹层 考试类型
  setType = e => {
    this.setState({ isExam: e.target.value })//提交的考试类型 ‘month’/'week'
  }

  //添加录屏 弹层 备注
  setComment = ({ target: { value } }) => {
    this.setState({ value });//提交的备注  字符串
  };

  //添加录屏 弹层 班级
  setClass(value) {
    //console.log(`selected ${value}`);
   // this.setState({ classid: value })//提交的班级  1/2/3
    //console.log(this.state.classid)
  }


  render() {
    const { columns, data, classgrade, visibleE, isPwd, isExam, classArr, show, value, pwd, filepath, searcharr } = this.state
    return <ConfigProvider locale={zhCN}>
      <div className={screen.box} >
        <div style={{ padding: '', position: 'relative' }} style={{marginTop:15}}>
        
         班级：<Select defaultValue="选择班级" onChange={this.searchClass} style={{ width: '20%'}} >
            {
              searcharr ? searcharr.map(item => {
                return <Option key={item.classid} value={item.classid}>{item.className}</Option>
              }) : null
            }
          </Select>

          <Button type="primary" className={screen.serachbtn}  onClick={this.searchbtn}>搜索</Button>
        
        </div>
        <div className={screen.serachp} onClick={console.log(pwd)}>
          <span className={screen.serachspan} style={{ width: 90}} onClick={this.addScreen}>添加录屏</span>
        </div>

        <Table className={screen.relatedPartyMaint} columns={columns} dataSource={data} pagination={{ pageSize: 6 }} rowKey={item => item.id} />
       
        {/*编辑弹层 */}
        <Modal title="添加录屏" visible={visibleE} onOk={this.handleOke} onCancel={this.handleCancele} bodyStyle={{ height: 370 }} >
          <div className={screen.row}>
            文件路径：<Input placeholder="请输入您的百度云地址" style={{ width: '70%', float: 'right' }} value={filepath} onChange={e => this.setState({ filepath: e.target.value })} />
          </div>
          <div className={screen.row}>
            当前链接是否加密: <Radio.Group onChange={this.setPwd} value={isPwd} style={{ width: '70%', float: 'right' }}>
              <Radio value='yes'>是</Radio>
              <Radio value='no'>否</Radio>
            </Radio.Group>
          </div>
          <div className={show ? screen.row : screen.div}>
            密码：<Input.Password placeholder="请输入密码" style={{ width: '70%', float: 'right' }} value={pwd} onChange={e => this.setState({ pwd: e.target.value })} />
          </div>
          <div className={screen.row}>
            当前录屏所属班级： <Select defaultValue="选择班级" style={{ width: '70%', float: 'right' }} onChange={value=>this.setState({classid:value})}>
              {
                classArr ? classArr.map(item => {
                  return <Option key={item.classid} value={item.classid}>{item.className}</Option>
                }) : null
              }
            </Select>
          </div>
          <div className={screen.row}>
            当前录屏考试类型：<Radio.Group onChange={this.setType} value={isExam} style={{ width: '70%', float: 'right' }}>
              <Radio value='week'>周考</Radio>
              <Radio value='month'>月考</Radio>
            </Radio.Group>
          </div>
          <div>
            备注：<TextArea
              value={value}
              onChange={this.setComment}
              placeholder="您要备注的内容..."
              autoSize={{ minRows: 3, maxRows: 5 }}
              style={{ width: '70%', float: 'right' }}
            />
          </div>
        </Modal>
      </div>
    </ConfigProvider>
  }
}
